<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core" 
                xmlns:ui="http://java.sun.com/jsf/facelets" 
                xmlns:p="http://primefaces.org/ui"
                template="/template/plantilla.xhtml">
    <ui:define name="title"><h:outputText value="Sinetcom - Crear Componente Atómico"></h:outputText></ui:define>
    <ui:define name="menu"><ui:include src="/menu/menu.xhtml" /></ui:define>
    <ui:define name="content">
        <f:view contentType="text/html">
            <h:head />
            <h:body>
                <h:form id="form">
                    <!--                    <p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
                                            <p:graphicImage library="images" name="ajax_loader.gif" />
                                        </p:dialog>-->
                    <p:panelGrid columns="1">
                        <p:panel id="ingresoComponenteE">
                            <p:panelGrid columns="2" columnClasses="label,value">
                                <f:facet name="header">
                                    <h:outputText value="Nuevo Componente Electrónico Atómico"></h:outputText>
                                </f:facet>
                                <p:outputLabel for="nombre" value="Nombre: "></p:outputLabel>
                                <p:inputText id="nombre"  required="true"  value="#{crearComponenteABean.componenteElectronicoAtomico.nombre}"></p:inputText>
                                <p:outputLabel for="parametros" value="Parámetros: "></p:outputLabel>
                                <p:selectManyMenu style="width: 100%;" id="parametros" required="true" value="#{crearComponenteABean.componenteElectronicoAtomico.parametroDeProductoList}" converter="#{parametroProductoConverter}" showCheckbox="true">
                                    <f:selectItems value="#{crearComponenteABean.parametrosDeProductos}" var="parametro" itemLabel="#{parametro.nombre}" itemValue="#{parametro.id.toString()}"></f:selectItems>
                                </p:selectManyMenu>
                                <f:facet name="footer">
                                    <p:commandButton value="Ingresar Componente Electrónico" actionListener="#{crearComponenteABean.crearComponenteElectronico}" process=":form:ingresoComponenteE" update="@form" onstart="statusDialog.show()" oncomplete="statusDialog.hide()"></p:commandButton>
                                </f:facet>
                            </p:panelGrid>
                        </p:panel>
                        <p:panel id="componentesP">
                            <p:dataTable id="componentes" value="#{crearComponenteABean.componenteElectronicoAtomicos}" var="componente">
                                <f:facet name="header">
                                    <h:outputText value="Componentes Atómicos"></h:outputText>
                                </f:facet>
                                <p:column headerText="Id">
                                    #{componente.id}
                                </p:column>
                                <p:column headerText="Nombre">
                                    #{componente.nombre}
                                </p:column>
                                <p:column headerText="Eliminar">
                                    <p:commandButton icon="ui-icon-trash" update=":form:componentes" process="@this" actionListener="#{crearComponenteABean.borrarComponenteElectronico}" onstart="statusDialog.show()" oncomplete="statusDialog.hide()">
                                        <f:attribute name="idComponente" value="#{componente.id}"></f:attribute>
                                        <p:confirm header="Confirmación" message="¿Está seguro que desea eliminar este componente?" icon="ui-icon-alert"></p:confirm>
                                    </p:commandButton>
                                </p:column>
                            </p:dataTable> 
                        </p:panel>
                        <p:panel id="ingresoAtributo">
                            <p:panelGrid columns="2" columnClasses="label,value">
                                <f:facet name="header">
                                    <h:outputText value="Ingreso de nuevo Atributo"></h:outputText>
                                </f:facet>
                                <p:outputLabel for="atributo" value="Nombre: "></p:outputLabel>
                                <p:inputText id="atributo" required="true"  value="#{crearComponenteABean.nuevoParametro.nombre}"></p:inputText>
                                <p:outputLabel for="tipoDato" value="Tipo de Dato: "></p:outputLabel>
                                <p:selectOneMenu id="tipoDato" value="#{crearComponenteABean.nuevoParametro.tipoDeDato}">
                                    <f:selectItem itemLabel="Entero" itemValue="1"></f:selectItem>
                                    <f:selectItem itemLabel="Decimal" itemValue="2"></f:selectItem>
                                    <f:selectItem itemLabel="Cadena de Caracteres" itemValue="3"></f:selectItem>
                                </p:selectOneMenu>
                                <p:outputLabel for="descripcion" value="Descripcion: "></p:outputLabel>
                                <p:inputTextarea id="descripcion" value="#{crearComponenteABean.nuevoParametro.descripcion}" cols="20" rows="10"></p:inputTextarea>
                                <p:outputLabel for="unidadMedida" value="Unidad de M: "></p:outputLabel>
                                <p:selectOneMenu id="unidadMedida" value="#{crearComponenteABean.nuevoParametro.unidadMedidaid}" converter="#{unidadMedidaConverter}" required="true" >
                                    <f:selectItem itemLabel="#{myBundle.SelectOneMessage}" itemValue=""></f:selectItem>
                                    <f:selectItems value="#{crearComponenteABean.medidas}" var="medida" itemLabel="#{medida.nombre}" itemValue="#{medida.id.toString()}"></f:selectItems>
                                </p:selectOneMenu>
                                <f:facet name="footer">
                                    <p:commandButton value="Agregar Atributo" process=":form:ingresoAtributo" actionListener="#{crearComponenteABean.ingresarParametro}" update=":form:ingresoAtributo, :form:parametros" onstart="statusDialog.show()" oncomplete="statusDialog.hide()"></p:commandButton>
                                    <p:commandButton value="Limpiar" process="@this" actionListener="#{crearComponenteABean.enserarPantallaParametro}" update="@form"></p:commandButton>
                                </f:facet>
                            </p:panelGrid>
                        </p:panel>
                        <p:panel id="atributosP">
                            <p:dataTable id="atributos" value="#{crearComponenteABean.parametrosDeProductos}" var="atributo">
                                <f:facet name="header">
                                    <h:outputText value="Atributos"></h:outputText>
                                </f:facet>
                                <p:column headerText="Id">
                                    #{atributo.id}
                                </p:column>
                                <p:column headerText="Nombre">
                                    #{atributo.nombre}
                                </p:column>
                                <p:column headerText="Unidad de M.">
                                    #{atributo.unidadMedidaid.nombre}
                                </p:column>
                                <p:column headerText="Descripción">
                                    #{atributo.descripcion}
                                </p:column>
                                <p:column headerText="Eliminar">
                                    <p:commandButton icon="ui-icon-trash" update=":form:atributos" process="@this" actionListener="#{crearComponenteABean.borrarAtributo}" onstart="statusDialog.show()" oncomplete="statusDialog.hide()">
                                        <f:attribute name="idAtributo" value="#{atributo.id}"></f:attribute>
                                        <p:confirm header="Confirmación" message="¿Está seguro que desea eliminar este atributo?" icon="ui-icon-alert"></p:confirm>
                                    </p:commandButton>
                                </p:column>
                            </p:dataTable> 
                        </p:panel>
                        <p:panel id="ingresoUnidadMedida">
                            <f:facet name="header">
                                <h:outputText value="Ingreso nueva Unidad de M."></h:outputText>
                            </f:facet>
                            <p:panelGrid columns="2" columnClasses="label,value">
                                <p:outputLabel for="nuevaUnidadMedida" value="Nombre:"></p:outputLabel>
                                <p:inputText id="nuevaUnidadMedida" required="true" value="#{crearComponenteABean.unidadMedida.nombre}"></p:inputText>
                            </p:panelGrid>
                            <f:facet name="footer">
                                <p:commandButton value="Agregar Unidad M." actionListener="#{crearComponenteABean.ingresarUnidadMedida}" process=":form:ingresoUnidadMedida" update="@form" onstart="statusDialog.show()" oncomplete="statusDialog.hide()"></p:commandButton>
                            </f:facet>
                        </p:panel>
                        <p:panel id="unidadesMP">
                            <p:dataTable id="unidades" value="#{crearComponenteABean.medidas}" var="medida">
                                <f:facet name="header">
                                    <h:outputText value="Unidades de Medida"></h:outputText>
                                </f:facet>
                                <p:column headerText="Id">
                                    #{medida.id}
                                </p:column>
                                <p:column headerText="Nombre">
                                    #{medida.nombre}
                                </p:column>
                                <p:column headerText="Eliminar">
                                    <p:commandButton icon="ui-icon-trash" update=":form:unidades" process="@this" actionListener="#{crearComponenteABean.borrarUnidadM}" onstart="statusDialog.show()" oncomplete="statusDialog.hide()">
                                        <f:attribute name="idUnidadM" value="#{medida.id}"></f:attribute>
                                        <p:confirm header="Confirmación" message="¿Está seguro que desea eliminar esta unidad de medida?" icon="ui-icon-alert"></p:confirm>
                                    </p:commandButton>
                                </p:column>
                            </p:dataTable> 
                        </p:panel>
                    </p:panelGrid>

                    <p:confirmDialog global="true">
                        <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
                        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
                    </p:confirmDialog>
                </h:form>
            </h:body>
        </f:view>
    </ui:define>
</ui:composition>